<template>
	<div class="flex-page-wrapper">
		<uni-nav-bar statusBar color="#fff" backgroundColor="#1E234B" :title="showTitle ? '在线交流' : ''">
			<!-- #ifdef MP-WEIXIN -->
			<template v-slot:leftIcon>
				<div class="nav-bar-left-icon">
					<image class="img" src="https://static.inclusionconf.com/static/images/back-wx.png" mode="widthFix" />
				</div>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<view class="tabs" v-if="!showTitle">
			<view class="tab" :class="activeIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabFn(index)">{{ item.name }}</view>
		</view>
		<view class="flex-page" v-if="showJoin">
			<isJoin @toCard="showCard = true"></isJoin>
		</view>
		<view class="flex-page" v-else>
			<baoming v-if="activeIndex == 0 && isBaoming" :detail="detail" @refresh="getDetail"></baoming>
			<list v-if="activeIndex == 0 && !isBaoming"></list>
			<yaoyue v-if="activeIndex == 1"></yaoyue>
			<tips ref="tips" v-if="activeIndex == 2"></tips>
		</view>
		<foot-wap :value="3"></foot-wap>
		<web-tips v-if="showTips"></web-tips>
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import baoming from './components/baoming.vue'
	import list from './components/list.vue'
	import yaoyue from './components/yaoyue.vue'
	import tips from './components/tips.vue'
	import isJoin from './components/isJoin.vue'

	export default {
		onShareTimeline(res) {
			return {
				title: 'Inclusion外滩大会',
				desc: 'Inclusion外滩大会是在上海举办的全球高级别金融科技和前沿科技大会，致力于搭建全球科技、金融和产业间的高规格开放对话平台，展现AI时代全球科技创新趋势，助力上海打造国际金融中心和科技创新中心。',
				path: '/pages/business/index',
				imageUrl: 'https://static.inclusionconf.com/static/images/chat/share-icon.png',
				success: () => {}
			}
		},
		onShareAppMessage(res) {
			return {
				title: 'Inclusion外滩大会',
				desc: 'Inclusion外滩大会是在上海举办的全球高级别金融科技和前沿科技大会，致力于搭建全球科技、金融和产业间的高规格开放对话平台，展现AI时代全球科技创新趋势，助力上海打造国际金融中心和科技创新中心。',
				path: '/pages/business/index',
				imageUrl: 'https://static.inclusionconf.com/static/images/chat/share-icon.png',
				success: () => {}
			}
		},
		components: {
			baoming,
			list,
			yaoyue,
			tips,
			isJoin,
		},
		data() {
			return {
				isBaoming: false,
				tabs: [{
						name: '交流广场'
					},
					{
						name: '现场邀约'
					},
					{
						name: '消息中心'
					},
				],
				activeIndex: 0,
				showJoin: false,
				detail: null,
				showTitle: false,
				showTips: false
			}
		},
		onShow() {
			this.showTips = true
			this.getDetail()
			if (this.activeIndex == 2) {
				this.$refs.tips.init()
			}
		},
		onHide() {
			this.showTips = false
		},
		methods: {
			tabFn(index) {
				this.activeIndex = index
			},
			getDetail() {
				protal.businesscarddetail().then(res => {
					// data为null展示参加不参加按钮 
					// res.data.openExchange = 'no'
					
					
					this.detail = res.data
					if (!this.detail) {
						this.showJoin = true
						this.showTitle = true
						return
					} else {
						this.showJoin = false
						this.showTitle = false
					}
					const checkState = this.detail.checkState // 1待审核 2审核通过 3驳回
					const openExchange = this.detail.openExchange
					if (checkState == 2 && openExchange == 'yes') {
						this.isBaoming = false
						this.showTitle = false
					} else {
						this.isBaoming = true
						this.showTitle = true
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		background-color: #1E234B;
		margin-top: -1px;
		padding: 10px 0 14px 16px;
		position: relative;
		z-index: 1;
		align-items: center;
		

		.tab {
			color: #fff;
			margin-right: 16px;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 15px;
			color: rgba(255, 255, 255, 0.6);
			line-height: 17px;
			font-style: normal;

			&.active {
				font-size: 17px;
				line-height: 17px;
				color: #fff;
			}
		}
	}
</style>